<template>
    <div class="la-one">
        <div class="la-one-r">
            <div class="la-one-q">{{ info.name }}</div>
            <div class="la-one-qq">{{ info.price }}元/袋</div>
        </div>
        <div class="la-one-w">
            <div class="la-one-ww" @click="getName1()">-</div>
            <div class="la-one-e">{{ info.status }}</div>
            <div class="la-one-ee" @click="getName()">+</div>
        </div>


    </div>
</template>

<script>
export default {
    name: "",
    /*1. Vue扩展 */
    extends: "", // extends和mixins都扩展逻辑，需要重点放前面
    mixins: [],
    components: {},
    /* 2. Vue数据 */
    props: {
        info: {
            type: Object,
        },

    },
    model: { prop: "", event: "" }, // model 会使用到 props
    data() {
        return {};
    },
    computed: {},
    watch: {}, // watch 监控的是 props 和 data，有必要时监控computed
    /* 3. Vue资源 */
    filters: {},
    directives: {},
    /* 4. Vue生命周期 */
    created() { },
    mounted() { },
    destroy() { },
    /* 5. Vue方法 */
    methods: {
        getName() {
            this.info.status = this.info.status + 1
            this.$emit('jszjg')

        },
        getName1() {
            if (this.info.status > 0) {
                this.info.status = this.info.status - 1
            }
            this.$emit('jszjg')
        },
    }
};
</script>


<style scoped lang="scss">
.la-one {
    height: 150px;
    margin: 15px 10px 0 10px;
    border: 1px solid red;
    display: flex;
    background-color: antiquewhite;

    .la-one-r {
        margin: 15px 10px 0 10px;

        .la-one-q {
            height: 35px;
            border: 1px solid red;
            width: 110px;
            text-align: center;
            line-height: 35px;
            color: brown;
        }

        .la-one-qq {
            height: 35px;
            border: 1px solid red;
            width: 110px;
            text-align: center;
            line-height: 35px;
            margin-top: 15px;
            color: brown;
        }

        .la-one-qqq {
            height: 35px;
            border: 1px solid red;
            width: 110px;
            text-align: center;
            line-height: 35px;
            margin-top: 15px;
            color: brown;
        }
    }

    .la-one-w {
        margin-left: auto;
        display: flex;
        align-items: center;

        .la-one-ww {
            height: 35px;
            width: 35px;
            border: 1px solid red;
            text-align: center;
            line-height: 35px;
            font-size: 20px;
            font-weight: 500;
            color: red;
            border-radius: 5px;
        }

        .la-one-e {
            height: 35px;
            width: 35px;
            border: 1px solid red;
            text-align: center;
            line-height: 35px;
            font-size: 20px;
            font-weight: 500;
            margin-left: 10px;
            color: red;
            border-radius: 5px;
        }

        .la-one-ee {
            height: 35px;
            width: 35px;
            border: 1px solid red;
            text-align: center;
            line-height: 35px;
            font-size: 20px;
            font-weight: 500;
            margin-left: 10px;
            color: red;
            border-radius: 5px;
        }
    }
}
</style>